<!--
  智慧社区管理系统 - 权限详情弹窗
  @author Wu.Liang
  @date 2024-01-01
  @updated 2024-12-21 - 完善权限详情弹窗功能
-->
<template>
    <el-dialog
        v-model="dialogVisible"
        title="权限详情"
        width="700px"
        :close-on-click-modal="false"
        @close="handleClose"
    >
        <div class="permission-detail" v-loading="loading">
            <div v-if="permissionData" class="detail-content">
                <!-- 基本信息 -->
                <el-card class="detail-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <el-icon><Setting /></el-icon>
                            <span>基本信息</span>
                        </div>
                    </template>
                    
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="权限ID">
                            {{ permissionData.id }}
                        </el-descriptions-item>
                        <el-descriptions-item label="权限编码">
                            <el-tag type="info" size="small">{{ permissionData.permissionCode }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="权限名称">
                            <strong>{{ permissionData.permissionName }}</strong>
                        </el-descriptions-item>
                        <el-descriptions-item label="权限类型">
                            <el-tag :type="getPermissionTypeTag(permissionData.type)" size="small">
                                {{ getPermissionTypeText(permissionData.type) }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="父权限ID">
                            {{ permissionData.parentId || '无' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="状态">
                            <el-tag :type="getStatusTagType(permissionData.status)" size="small">
                                {{ getStatusText(permissionData.status) }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="排序号">
                            {{ permissionData.sortOrder }}
                        </el-descriptions-item>
                        <el-descriptions-item label="创建时间">
                            {{ formatDate(permissionData.createTime) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="更新时间">
                            {{ formatDate(permissionData.updateTime) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="权限路径" v-if="permissionData.permissionPath" :span="2">
                            <code>{{ permissionData.permissionPath }}</code>
                        </el-descriptions-item>
                        <el-descriptions-item label="权限URL" v-if="permissionData.permissionUrl" :span="2">
                            <code>{{ permissionData.permissionUrl }}</code>
                        </el-descriptions-item>
                        <el-descriptions-item label="权限图标" v-if="permissionData.icon" :span="2">
                            <el-icon class="permission-icon">
                                <component :is="permissionData.icon" />
                            </el-icon>
                            <span class="icon-name">{{ permissionData.icon }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="权限描述" :span="2">
                            {{ permissionData.description || '暂无描述' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="备注" :span="2">
                            {{ permissionData.remark || '暂无备注' }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>

                <!-- 子权限信息 -->
                <el-card class="detail-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <el-icon><Folder /></el-icon>
                            <span>子权限信息</span>
                            <el-tag type="info" size="small">{{ childPermissions.length }} 个子权限</el-tag>
                        </div>
                    </template>
                    
                    <div class="child-permissions">
                        <div v-if="childPermissions.length > 0" class="permission-list">
                            <div 
                                v-for="permission in childPermissions" 
                                :key="permission.id"
                                class="permission-item"
                            >
                                <el-icon class="permission-icon" :class="getPermissionIconClass(permission.type)">
                                    <component :is="getPermissionIcon(permission.type)" />
                                </el-icon>
                                <div class="permission-content">
                                    <div class="permission-name">{{ permission.permissionName }}</div>
                                    <div class="permission-code">{{ permission.permissionCode }}</div>
                                </div>
                                <el-tag 
                                    size="small" 
                                    :type="getPermissionTypeTag(permission.type)"
                                >
                                    {{ getPermissionTypeText(permission.type) }}
                                </el-tag>
                                <el-tag 
                                    :type="getStatusTagType(permission.status)" 
                                    size="small"
                                >
                                    {{ getStatusText(permission.status) }}
                                </el-tag>
                            </div>
                        </div>
                        <el-empty 
                            v-else 
                            description="暂无子权限"
                            :image-size="100"
                        />
                    </div>
                </el-card>

                <!-- 权限统计 -->
                <el-card class="detail-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <el-icon><DataAnalysis /></el-icon>
                            <span>权限统计</span>
                        </div>
                    </template>
                    
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="stat-item">
                                <div class="stat-number">{{ childPermissions.length }}</div>
                                <div class="stat-label">子权限数量</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="stat-item">
                                <div class="stat-number">{{ enabledChildCount }}</div>
                                <div class="stat-label">启用子权限</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="stat-item">
                                <div class="stat-number">{{ disabledChildCount }}</div>
                                <div class="stat-label">禁用子权限</div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
            
            <el-empty v-else description="权限信息不存在" />
        </div>
        
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">关闭</el-button>
                    编辑权限
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { 
    Setting, 
    Folder, 
    DataAnalysis,
    Menu, 
    Operation, 
    Key
} from '@element-plus/icons-vue'
import type { PermissionTree } from '@/api/role'
import { getPermissionTree } from '@/api/role'

// Props
interface Props {
    modelValue: boolean
    permissionData?: PermissionTree | null
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    permissionData: null
})

// Emits
const emit = defineEmits<{
    'update:modelValue': [value: boolean]
    'edit': [permission: PermissionTree]
}>()

// 响应式数据
const loading = ref(false)
const allPermissions = ref<PermissionTree[]>([])

// 计算属性
const dialogVisible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
})

const childPermissions = computed(() => {
    if (!props.permissionData?.id) return []
    return findChildPermissions(props.permissionData.id, allPermissions.value)
})

const enabledChildCount = computed(() => {
    return childPermissions.value.filter(p => p.status === 0).length
})

const disabledChildCount = computed(() => {
    return childPermissions.value.filter(p => p.status === 1).length
})

// 监听弹窗显示
watch(() => props.modelValue, (visible) => {
    if (visible) {
        fetchAllPermissions()
    }
})

// 获取所有权限
const fetchAllPermissions = async () => {
    try {
        loading.value = true
        const response = await getPermissionTree()
        allPermissions.value = response.data
    } catch (error: any) {
        ElMessage.error(`获取权限数据失败: ${error.message}`)
    } finally {
        loading.value = false
    }
}

// 查找子权限
const findChildPermissions = (parentId: number, permissions: PermissionTree[]): PermissionTree[] => {
    const children: PermissionTree[] = []
    const traverse = (nodes: PermissionTree[]) => {
        nodes.forEach(node => {
            if (node.parentId === parentId) {
                children.push(node)
            }
            if (node.children && node.children.length > 0) {
                traverse(node.children)
            }
        })
    }
    traverse(permissions)
    return children
}

// 获取权限图标
const getPermissionIcon = (type: number) => {
    switch (type) {
        case 1: return Menu // 菜单
        default: return Setting
    }
}

// 获取权限图标样式
const getPermissionIconClass = (type: number) => {
    switch (type) {
        case 1: return 'icon-menu'
        default: return 'icon-default'
    }
}

// 获取权限类型标签
const getPermissionTypeTag = (type: number) => {
    switch (type) {
        case 1: return 'primary'
        default: return 'info'
    }
}

// 获取权限类型文本
const getPermissionTypeText = (type: number) => {
    switch (type) {
        case 1: return '菜单'
        default: return '未知'
    }
}

// 工具函数
const getStatusTagType = (status: number) => {
    return status === 0 ? 'success' : 'danger'
}

const getStatusText = (status: number) => {
    return status === 1 ? '启用' : '禁用'
}

const formatDate = (date: string) => {
    if (!date) return '-'
    return new Date(date).toLocaleString('zh-CN')
}

// 关闭弹窗
const handleClose = () => {
    dialogVisible.value = false
    allPermissions.value = []
}

// 编辑权限
const handleEdit = () => {
    if (props.permissionData) {
        emit('edit', props.permissionData)
        handleClose()
    }
}
</script>

<style lang="scss" scoped>
.permission-detail {
    .detail-content {
        .detail-card {
            margin-bottom: 20px;
            border-radius: 8px;

            &:last-child {
                margin-bottom: 0;
            }

            .card-header {
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 600;
                color: #303133;

                .el-icon {
                    font-size: 16px;
                    color: #409eff;
                }
            }

            .child-permissions {
                .permission-list {
                    .permission-item {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        padding: 12px;
                        margin-bottom: 8px;
                        background: #f8f9fa;
                        border-radius: 6px;
                        transition: all 0.3s ease;

                        &:hover {
                            background: #e9ecef;
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }

                        .permission-icon {
                            font-size: 18px;
                            flex-shrink: 0;
                            
                            &.icon-menu {
                                color: #409eff;
                            }
                            
                            &.icon-button {
                                color: #67c23a;
                            }
                            
                            &.icon-api {
                                color: #e6a23c;
                            }
                            
                            &.icon-default {
                                color: #909399;
                            }
                        }

                        .permission-content {
                            flex: 1;
                            min-width: 0;

                            .permission-name {
                                font-size: 14px;
                                font-weight: 500;
                                color: #303133;
                                margin-bottom: 4px;
                            }

                            .permission-code {
                                font-size: 12px;
                                color: #909399;
                                font-family: 'Courier New', monospace;
                            }
                        }
                    }
                }
            }

            .stat-item {
                text-align: center;
                padding: 20px;
                background: #f8f9fa;
                border-radius: 8px;

                .stat-number {
                    font-size: 24px;
                    font-weight: 600;
                    color: #409eff;
                    margin-bottom: 8px;
                }

                .stat-label {
                    font-size: 14px;
                    color: #606266;
                }
            }
        }
    }
}

.dialog-footer {
    text-align: right;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

:deep(.el-descriptions__label) {
    font-weight: 500;
    color: #606266;
}

:deep(.el-descriptions__content) {
    color: #303133;

    code {
        background: #f5f7fa;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
        color: #e6a23c;
    }

    .permission-icon {
        font-size: 16px;
        color: #409eff;
        margin-right: 8px;
    }

    .icon-name {
        font-family: 'Courier New', monospace;
        color: #909399;
    }
}
</style> 